<template>
  <Container
    padding-top="0px"
    padding-bottom="0px"
    bg-color="#F5F8FA"
    class="wrap-container"
  >
    <div class="banner5 common">
      <div class="left flex-1">
        <div class="title">
          <div class="number-icon">
            <svg
              width="136"
              height="92"
              viewBox="0 0 136 92"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <mask
                id="path-1-outside-1_127_116"
                maskUnits="userSpaceOnUse"
                x="-2"
                y="-2"
                width="140"
                height="96"
                fill="black"
              >
                <rect fill="white" x="-2" y="-2" width="140" height="96" />
                <path
                  d="M29.736 91.408C9.93867 91.408 0.0400004 80.6133 0.0400004 59.024V31.632C0.0400004 21.3067 2.55733 13.4987 7.592 8.20799C12.6267 2.91733 20.008 0.271996 29.736 0.271996C39.6347 0.271996 47.0587 2.91733 52.008 8.20799C56.9573 13.4987 59.432 21.3067 59.432 31.632V59.024C59.432 69.6907 56.9573 77.7547 52.008 83.216C47.0587 88.6773 39.6347 91.408 29.736 91.408ZM29.736 76.816C34.4293 76.816 37.7573 75.3227 39.72 72.336C41.6827 69.264 42.664 64.3573 42.664 57.616V34.064C42.664 27.3227 41.64 22.4587 39.592 19.472C37.6293 16.4853 34.344 14.992 29.736 14.992C25.128 14.992 21.8427 16.4853 19.88 19.472C17.9173 22.4587 16.936 27.3227 16.936 34.064V57.616C16.936 64.3573 17.9173 69.264 19.88 72.336C21.8427 75.3227 25.128 76.816 29.736 76.816ZM135.138 75.92H127.074V90H110.306V75.92H70.242V61.2L98.53 1.67999H115.682L87.266 61.2H110.306V40.464H127.074V61.2H135.138V75.92Z"
                />
              </mask>
              <path
                d="M7.592 8.20799L6.14317 6.82927L7.592 8.20799ZM52.008 8.20799L53.4685 6.84168H53.4685L52.008 8.20799ZM52.008 83.216L50.526 81.873H50.526L52.008 83.216ZM39.72 72.336L41.3914 73.4344L41.3985 73.4236L41.4054 73.4128L39.72 72.336ZM39.592 19.472L37.9206 20.5704L37.9314 20.5868L37.9425 20.6031L39.592 19.472ZM19.88 19.472L21.5514 20.5704L21.5514 20.5704L19.88 19.472ZM19.88 72.336L18.1946 73.4128L18.2015 73.4236L18.2086 73.4344L19.88 72.336ZM29.736 89.408C20.1923 89.408 13.389 86.8141 8.93807 81.9603C4.45703 77.0736 2.04 69.5513 2.04 59.024H-1.96C-1.96 70.0861 0.572304 78.7557 5.98993 84.6637C11.4376 90.6045 19.4823 93.408 29.736 93.408V89.408ZM2.04 59.024V31.632H-1.96V59.024H2.04ZM2.04 31.632C2.04 21.6068 4.48376 14.3755 9.04083 9.58672L6.14317 6.82927C0.630904 12.6218 -1.96 21.0065 -1.96 31.632H2.04ZM9.04083 9.58672C13.5848 4.81174 20.3663 2.272 29.736 2.272V-1.728C19.6497 -1.728 11.6686 1.02292 6.14317 6.82927L9.04083 9.58672ZM29.736 2.272C39.291 2.272 46.0991 4.81915 50.5475 9.57431L53.4685 6.84168C48.0183 1.0155 39.9784 -1.728 29.736 -1.728V2.272ZM50.5475 9.57431C55.0268 14.3625 57.432 21.5987 57.432 31.632H61.432C61.432 21.0146 58.8879 12.6348 53.4685 6.84168L50.5475 9.57431ZM57.432 31.632V59.024H61.432V31.632H57.432ZM57.432 59.024C57.432 69.4135 55.0193 76.9148 50.526 81.873L53.49 84.559C58.8953 78.5945 61.432 69.9678 61.432 59.024H57.432ZM50.526 81.873C46.0734 86.7862 39.2728 89.408 29.736 89.408V93.408C39.9965 93.408 48.0439 90.5685 53.49 84.559L50.526 81.873ZM29.736 78.816C34.8671 78.816 38.9459 77.1558 41.3914 73.4344L38.0486 71.2376C36.5688 73.4895 33.9916 74.816 29.736 74.816V78.816ZM41.4054 73.4128C43.684 69.8463 44.664 64.462 44.664 57.616H40.664C40.664 64.2526 39.6814 68.6817 38.0346 71.2592L41.4054 73.4128ZM44.664 57.616V34.064H40.664V57.616H44.664ZM44.664 34.064C44.664 27.2172 43.6424 21.8424 41.2415 18.3409L37.9425 20.6031C39.6376 23.0749 40.664 27.4281 40.664 34.064H44.664ZM41.2634 18.3736C38.8249 14.6628 34.7983 12.992 29.736 12.992V16.992C33.8897 16.992 36.4338 18.3078 37.9206 20.5704L41.2634 18.3736ZM29.736 12.992C24.6737 12.992 20.6471 14.6628 18.2086 18.3736L21.5514 20.5704C23.0382 18.3078 25.5823 16.992 29.736 16.992V12.992ZM18.2086 18.3736C15.9131 21.8667 14.936 27.226 14.936 34.064H18.936C18.936 27.4194 19.9215 23.0506 21.5514 20.5704L18.2086 18.3736ZM14.936 34.064V57.616H18.936V34.064H14.936ZM14.936 57.616C14.936 64.462 15.916 69.8463 18.1946 73.4128L21.5654 71.2592C19.9186 68.6817 18.936 64.2526 18.936 57.616H14.936ZM18.2086 73.4344C20.6471 77.1452 24.6737 78.816 29.736 78.816V74.816C25.5823 74.816 23.0382 73.5002 21.5514 71.2376L18.2086 73.4344ZM135.138 75.92V77.92H137.138V75.92H135.138ZM127.074 75.92V73.92H125.074V75.92H127.074ZM127.074 90V92H129.074V90H127.074ZM110.306 90H108.306V92H110.306V90ZM110.306 75.92H112.306V73.92H110.306V75.92ZM70.242 75.92H68.242V77.92H70.242V75.92ZM70.242 61.2L68.4356 60.3415L68.242 60.7489V61.2H70.242ZM98.53 1.67999V-0.320007H97.2662L96.7236 0.821484L98.53 1.67999ZM115.682 1.67999L117.487 2.54167L118.853 -0.320007H115.682V1.67999ZM87.266 61.2L85.4611 60.3383L84.0949 63.2H87.266V61.2ZM110.306 61.2V63.2H112.306V61.2H110.306ZM110.306 40.464V38.464H108.306V40.464H110.306ZM127.074 40.464H129.074V38.464H127.074V40.464ZM127.074 61.2H125.074V63.2H127.074V61.2ZM135.138 61.2H137.138V59.2H135.138V61.2ZM135.138 73.92H127.074V77.92H135.138V73.92ZM125.074 75.92V90H129.074V75.92H125.074ZM127.074 88H110.306V92H127.074V88ZM112.306 90V75.92H108.306V90H112.306ZM110.306 73.92H70.242V77.92H110.306V73.92ZM72.242 75.92V61.2H68.242V75.92H72.242ZM72.0484 62.0585L100.336 2.5385L96.7236 0.821484L68.4356 60.3415L72.0484 62.0585ZM98.53 3.67999H115.682V-0.320007H98.53V3.67999ZM113.877 0.818317L85.4611 60.3383L89.0709 62.0617L117.487 2.54167L113.877 0.818317ZM87.266 63.2H110.306V59.2H87.266V63.2ZM112.306 61.2V40.464H108.306V61.2H112.306ZM110.306 42.464H127.074V38.464H110.306V42.464ZM125.074 40.464V61.2H129.074V40.464H125.074ZM127.074 63.2H135.138V59.2H127.074V63.2ZM133.138 61.2V75.92H137.138V61.2H133.138Z"
                fill="url(#paint0_linear_127_116)"
                mask="url(#path-1-outside-1_127_116)"
              />
              <defs>
                <linearGradient
                  id="paint0_linear_127_116"
                  x1="113"
                  y1="-25"
                  x2="116.049"
                  y2="89.9191"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#172026" />
                  <stop offset="0.71" stop-color="#172026" stop-opacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="text black">{{ $t("content.home.banner5.title") }}</div>
          <div class="en color-2">
            {{ $t("content.home.banner5.sub_title") }}
          </div>
        </div>
        <div class="introduce" v-if="pageData" v-html="pageData"></div>
        <div class="introduce" v-else>
          <div class="pc-skeleton">
            <Skeleton :rows="2"></Skeleton>
          </div>
          <div class="mobile-skeleton">
            <Skeleton :rows="3" mobile></Skeleton>
          </div>
        </div>
      </div>
      <div class="right" v-if="StudentPics" ref="rightMarqueeBoxRef">
        <div v-for="(item, idx) in StudentPics" :key="idx">
          <div class="moblie-marquee">
            <Vue3Marquee
              pause-on-hover
              :direction="idx % 2 == 0 ? '' : 'reverse'"
            >
              <div class="card" v-for="(inner, index) in item" :key="index">
                <img :src="inner.single_pic" alt="" />
              </div>
            </Vue3Marquee>
          </div>
          <div
            class="pc-marquee"
            :class="[item.length < 6 ? 'reset-marquee' : '']"
          >
            <Vue3Marquee
              vertical
              pause-on-hover
              :direction="idx % 2 == 0 ? 'reverse' : ''"
            >
              <div class="card" v-for="(inner, index) in item" :key="index">
                <img :src="inner.single_pic" alt="" />
              </div>
            </Vue3Marquee>
          </div>
        </div>
      </div>
      <div class="right skeleton" v-else>
        <div v-for="i in 2" :key="i">
          <div class="card" v-for="i in 5" :key="i">
            <Skeleton width="100%" height="100%"></Skeleton>
          </div>
        </div>
      </div>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Vue3Marquee } from "vue3-marquee";
import { postOnePageQuery } from "../../../api/banner";
import { ref, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from "vue";
import { postStudentList } from "../../../api/banner";
import { useCacheStore } from "../../../store";
import { create2DArray } from "./create2DArray";

const cacheStore = useCacheStore();

const pageData = ref();
const getOnePageData = async () => {
  if (cacheStore.onePageData[4]) {
    pageData.value = cacheStore.onePageData[4];
    return;
  }
  let res = await postOnePageQuery(4);
  if (res.code === 200) {
    pageData.value = res.data;
    cacheStore.onePageData[4] = res.data;
  }
};

const StudentPics = ref();
const getBrandData = async () => {
  let res = await postStudentList();

  if (res.code === 200) {
    // 处理学员图片
    let newData = create2DArray(res.data, 2);
    StudentPics.value = newData;
  }
};

Promise.all([getBrandData(), getOnePageData()]);

const rightMarqueeBoxRef = ref<HTMLElement | undefined>();
const _rawMarqueeHeight = ref();
const _rawMarqueeItemHeight = ref();
const resetMarquee = () => {
  function reset() {
    let needResetMarqueeContainers =
      rightMarqueeBoxRef.value?.querySelectorAll(".reset-marquee");
    needResetMarqueeContainers?.forEach((el) => {
      let marquee = el.querySelector(".vue3-marquee") as HTMLElement;
      let marquees = el.querySelectorAll(".marquee");
      let rawMarqueeHeight =
        _rawMarqueeHeight.value || marquee.getBoundingClientRect().height;
      let rawMarqueeItemHeight = _rawMarqueeItemHeight.value || undefined;
      // 获取当前的缩放比
      marquees.forEach((item: HTMLElement) => {
        if (!rawMarqueeItemHeight) {
          rawMarqueeItemHeight = item.getBoundingClientRect().height;
        }
        item.style.height = rawMarqueeHeight + "px";
      });
      if (_rawMarqueeHeight.value && _rawMarqueeItemHeight.value) return;
      _rawMarqueeHeight.value = rawMarqueeHeight;
      _rawMarqueeItemHeight.value = rawMarqueeItemHeight;
    });
  }
  nextTick(() => {
    reset();
  });
};

onMounted(() => {
  window.addEventListener("resize", resetMarquee);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resetMarquee);
});
</script>
<style scoped lang="less">
@import url("./common.less");
@import url("./media-banner5.less");
.banner5 {
  display: flex;
}
.moblie-marquee {
  display: none;
}

.left {
  padding: 135px 0;
  padding-right: 184px;
  .introduce {
    font-weight: 400;
    font-size: 20px;
    color: #36434d;
  }
}
.right {
  height: 544px;
  overflow: hidden;
  display: flex;
  margin: 48px 0;
  position: relative;
  gap: 24px;
  &::before,
  &::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    height: 100px;
    z-index: 1;
  }
  &::before {
    top: 0;
    background: linear-gradient(
      180deg,
      #f5f8fa 0%,
      rgba(245, 248, 250, 0) 100%
    );
  }
  &::after {
    bottom: 0;
    background: linear-gradient(
      180deg,
      rgba(245, 248, 250, 0) 0%,
      #f5f8fa 100%
    );
  }
  & > div {
    overflow: hidden;
  }
  .card {
    margin-bottom: 24px;
  }
  & > div:first-child {
    margin-bottom: 48px;
  }
  & > div:last-child {
    margin-top: 48px;
  }
}

@media screen and (max-width: 768px) {
  .moblie-marquee {
    display: block;
  }
  .pc-marquee {
    display: none;
  }
}
</style>
